<template>
<div>
  <p id="head-name">个人管理日志</p>
  <p id="head-name-hr"></p>
  <form class="input-act" :model="rzfrom" :rules="rules">
    <div class="input-group" prop="sub1">
      <span class="input-group-addon">今日计划</span>
      <input type="text" v-model="rzfrom.sub1" class="form-control" aria-label="Amount (to the nearest dollar)">
      <span class="input-group-addon"><button v-on:click="submit"  class="sub1" />提交</span>
    </div>
    <div class="input-group" prop="sub2">
      <span class="input-group-addon">完成情况</span>
      <input type="text" v-model="rzfrom.sub2" class="form-control" aria-label="Amount (to the nearest dollar)">
      <span class="input-group-addon"><button  v-on:click="submit2" class="sub2" />提交</span>
    </div>
    <div class="input-group" prop="sub3">
      <span class="input-group-addon">总结/反思</span>
      <input type="text"  v-model="rzfrom.sub3" class="form-control" aria-label="Amount (to the nearest dollar)">
      <span class="input-group-addon"><button v-on:click="submit3"  class="sub3" />提交</span>
    </div>

  </form>
  <div class="container-fluid">
    <table class="table table-striped">
      <tr class="row">
        <th class="col-lg-1 col-md-1 col-sm-1 col-xs-1">日期</th>
        <th class="col-lg-4 col-md-4 col-sm-4 col-xs-4">今日的计划</th>
        <th class="col-lg-4 col-md-4 col-sm-4 col-xs-4">计划完成情况</th>
        <th class="col-lg-3 col-md-3 col-sm-3 col-xs-3">总结/反思</th>
      </tr>
      <tr class="row">
        <td class="col-lg-1 col-md-1 col-sm-1 col-xs-1">11.18</td>
        <td class="col-lg-4 col-md-4 col-sm-4 col-xs-4">今天吃了饭</td>
        <td class="col-lg-4 col-md-4 col-sm-4 col-xs-4">今天吃了早饭、中饭、晚饭</td>
        <td class="col-lg-3 col-md-3 col-sm-3 col-xs-3">不好吃</td>
      </tr>
    </table>
  </div>
</div>

</template>
<script>
export default {
  data(){
    return{
      rules:{
        sub1: [{require:true,message:"不能位空",trigger:'blur'}],
        sub2: [{require:true,message:"不能位空",trigger:'blur'}],
        sub3: [{require:true,message:"不能位空",trigger:'blur'}]
      },
        rzfrom:{
          sub1:'',
          sub2:'',
          sub3:''
        }
    }
  },
  methods:{
    submit(){
      var _this=this
      this.$axios
          .post('/InsertMorning',{sub1:rzfrom.sub1})
          .then(resp =>{
            alert("qwe")
            /*this.$alert(resp.data.message, '提示', {
              confirmButtonText: '确定'
            })*/
      })
    },
    submit2(){
      var _this=this
      this.$axios
          .post('/InsertMorning',{sub2:rzfrom.sub2})
          .then(resp =>{
            this.$alert(resp.data.message, '提示', {
              confirmButtonText: '确定'
            })
          })
    },
    submit3(){
      var _this=this
      this.$axios
          .post('/InsertMorning',{sub3:rzfrom.sub13})
          .then(resp =>{
            this.$alert(resp.data.message, '提示', {
              confirmButtonText: '确定'
            })
          })
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
/* 页面的头部内容  */

#head {
  background-color: gray;
  height: 9vh;
  display: flex;
  background-color: #333333;
  align-items: center;
}

#head .head-pic {
  /* 头像部分 */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: 8vw;
  cursor: pointer;
}

#head .head-pic:hover {
  width: 60px;
  height: 60px;
}

#head span {
  margin-left: 40px;
  font-size: 18px;
  font-family: inherit;
}

#head a {
  color: #9D9D9D;
  text-decoration: none;
  /*去下划线*/
  cursor: pointer;
}

#head a:hover {
  color: whitesmoke;
}

#head-name {
  text-align: center;
  margin: 50px 0;
  color: #9D9D9D;
  font-size: 50px;
}

#head-name-hr {
  background-color: gray;
  height: 1px;
}

#new-time {
  text-align: center;
}
/* 页面的身体部分  */

.container-fluid {
  margin-top: 30px;
}

.container-fluid tr th,td{
  text-align: center;
  font-size: 16px;
  word-break: break-all;
  vertical-align: middle !important;
  height: 50px;
}
.container-fluid tr th{
  font-size: 20px;
}
.container .row:nth-child(1) {
  background-color: pink;
}
/* 填入数据部分  */

.input-group {
  margin: 5px 5px;
}

.input-act {
  border: 1px #9D9D9D solid;
  margin: 20px 15px;
  border-radius: 10px;
  background-color: rgb(231, 231, 231);
}

.input-group .input-group-addon{
  border: none;
  outline: none;
  cursor: pointer;
}
</style>

